<template>
<!-- =================烘焙圈=============== -->
    <div class="circle">
        <!-- ==============导航栏================= -->
      <div class="sea" >
        <van-search
           v-model="value"
           show-action
           placeholder="请输入搜索关键词" @click="$router.push('/select')">
             <template #left>
                <div >
                    <van-icon name="plus" size="3vh" @click="upload1"/>
                </div>
             </template>
             <template #action>
                <div>
                    <van-icon name="envelop-o" size="3vh" @click="info"/>
                </div>
             </template>
        </van-search>
      </div>
      <div class="bai"></div>
        <!-- ==============活动部分============= -->
      <!-- <div class="act">
        <van-grid :border="false" :column-num="2" clickable :gutter="10" class="activity">
            <van-grid-item to="/about">
                <van-image src="/activity1.jpg" />
            </van-grid-item>
            <van-grid-item to="/about">
                <van-image src="/activity2.jpg" />
            </van-grid-item>
        </van-grid>
      </div> -->
      <div class="activity">
        <div>
            <img src="/activity1.jpg" alt="" @click="act1">
        </div>
        <div>
            <img src="/activity2.jpg" alt="" @click="act2">
        </div>
      </div>
        <!-- 阴影条 -->
        <div class="yin"></div>
        <!-- ==============内容部分============= -->
        <div v-if="circledata">
        <div class="container"  v-for="(x,index) in circledata" :key="index" >
            <!-- ==头像昵称== -->
            <div class="header" >
                <div class="in">
                    <div>
                        <van-image round width="5.5vh" height="5.5vh" :src="x.epic"/>         
                    </div>
                    <div class="nicheng">
                        <div class="n1">{{x.ename}}</div>
                        <div class="n2">{{tips[index]}}</div>
                    </div> 
                </div>
                <div :class="{active:collectActive==true}"  @click="collectClick">
                    <van-icon name="star-o" size="3vh"/>
                </div>
              
            </div>
            <!-- ==文字图片== -->
            <div class="main">
                <div class="con">{{x.info}}</div>
                <div class="pic" v-html="x.img">   
                </div>   
            </div>
            <!-- ==点赞评论分享== -->
            <div class="footer" >
                <van-row type="flex" justify="space-around">
                    <!-- 点赞部份 -->
                    <div class="xin" @click="dianzan(index, x.eid)">
                        <!-- <i class="iconfont " >&#xe607;</i> -->
                        <van-icon name="like-o" color="red" v-if="x.xin"/>
                        <!-- <i class="iconfont" >&#xe68b;</i> -->
                        <van-icon name="like-o"  v-else/>
                        <span>{{x.likes}}</span>
                    </div>

                    <!-- 评论部份 -->
                    <van-col span="6" @click="contentClick(index,x.eid)">
                        <van-icon name="other-pay" size="3vh"/>
                        <span>评论</span>
                    </van-col>
                    <!-- 分享部份 --> 
                    <van-col span="6">
                        <van-icon name="share-o" size="3vh" @click="showShare=true"/>
                        <van-share-sheet
                            v-model="showShare"
                            title="立即分享"
                            :options="options"
                             @select="onSelect"/>
                        <span>分享</span>
                    </van-col>
                </van-row>
            </div>
        <!-- ==阴影条== -->
        <div class="yin"></div>    
        </div>
         
        </div>
         <my-footer></my-footer>
    </div>
</template>

<script>
import { Toast } from 'vant';
import MyFooter from '@/components/MyFooter.vue';

    export default {
        components: { MyFooter},
        data(){
            return {
                value:'',  
                now:null,
                search:'',//搜索框内容
                circledata:[],//存放接口数据
                showShare: false,//分享遮罩显示状态
                options: [
                { name: '微信好友', icon: 'wechat' },
                { name: '朋友圈', icon: 'wechat-moments' },
                { name: '微博', icon: 'weibo' },
                { name: 'QQ', icon: 'qq' },
                { name: '复制链接', icon: 'link' },
                { name: '二维码', icon: 'qrcode' },
                ],//存放分享按钮信息
                collectActive:null,//收藏激活状态
                //likeactive:false,
                likes:null,//存放点赞数
                eid:[],
                chooseList:[],
                zanListId: [],//存放点赞的id
                pingListId:[],//存放评论的id
                tips:[],
                time:'',//存放getLastDate函数的参数
                circletime:[],
            }
        },
        methods:{
           
         
            // 数据导入
            circledData(){ 
                       
                var url='http://localhost:3333/circle'
                //var url='http://localhost:3333/circle/list'
                
                this.$axios.get(url).then(res=>{
                    //console.log(res);
                    this.circledata=res.data.data.reverse()
                    
                })
            },
            // 收藏
            collectClick(){
                this.collectActive=!this.collectActive;
            },
            // 点赞
            dianzan(index,eid){
                console.log(index,eid);
                let list = this.zanListId;
                if (list.indexOf(eid) == -1) {
                    // 没找到执行点赞功能
                    this.circledata[index].likes += 1;
                    
                    this.zanListId.push(eid);
                    this.circledata[index].xin = !this.circledata[index].xin;
                    //console.log(likes);

                }else{
                    this.circledata[index].likes -= 1;
                    this.circledata[index].xin = !this.circledata[index].xin;
                     for (var i in this.zanListId) {
                         if (this.zanListId[i] == eid) {
                            this.zanListId.splice(i, 1);
                         }
                     }
                }
                console.log(this.likes,this.circledata[index].likes,eid );
                let url=`http://localhost:3333/circle/update`
                let params=`likes=${this.circledata[index].likes}&eid=${eid}`
                this.$axios.post(url,params).then(res=>{
                    console.log(res);
                })
            },
            // 评论
            contentClick(index,eid){
                console.log(index,eid);
                this.$router.push({path: `content?eid=${eid}`})
            },
            // 左上角上传按钮跳转
            upload1(){
                this.$router.push('upload1')
            },
            // 右上角上传按钮跳转
            info(){
                this.$router.push('about')
            },
            // 活动跳转
            act1(){
                this.$router.push('about')
            },
            act2(){
                this.$router.push('about')
            },           
            // 分享遮罩层
            onSelect(option) {
                Toast(option.name);
                this.showShare = false;
            },
            // 时间
            //当前时间戳
            getUnix:function(){
                var date =new Date()
                return date.getTime()
            },
            //今天0时0分时间戳
            getTodayUnix:function(){
                var date=new Date()
                date.setHours(0)
                date.setMinutes(0)
                date.setSeconds(0)
                date.setMilliseconds(0)
                return date.getTime()
            },
            //今年1月1日0时0分时间戳
            getYearUnix:function(){
                var date=new Date()
                date.setMonth(0)
                date.setDate(1)
                date.setHours(0)
                date.setMinutes(0)
                date.setSeconds(0)
                date.setMilliseconds(0)
                return date.getTime()      
            },
            //获取标准年月日
            getLastDate:function(time){
                var date=new Date(time)
                var month=date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1
                var day =date.getDate()<10?'0'+date.getDate():date.getDate()
                return date.getFullYear()+'-'+month+"-"+day
            },
            // 修改数据库拿到的时间戳为规定的形式函数
            upCircle(){
                //console.log(123);
                 var url='http://localhost:3333/circle'
                 this.$axios.get(url).then(res=>{
                    //console.log(res);
                    this.circletime=res.data.data
                    console.log(this.circletime[0].up_time);
               for(var i=0;i<this.circletime.length;i++){ 
                  console.log(this.circletime.length,this.circletime[i].up_time)

                 // 变量timestamp存放数组中的createtime属性内容
                 var timestamp=Number(this.circletime[i].up_time)
                 var now=this.getUnix()//获取当前时间戳
                 var today=this.getTodayUnix()//获取今日0时0分时间戳
                 var timer =parseInt(((now-timestamp)/1000).toFixed(0))//获取时间戳之差并换成秒级时间戳
                var tip=''//定义变量tip
                if (timer <= 0) {
                        tip='刚刚'   
                }else if(Math.floor(timer/60) <= 0){
                        tip ='刚刚'              
                }else if(timer<3600){
                        tip = Math.floor(timer/60)+'分钟前'     
                }else if(timer>=3600&&(timestamp-today>=0)){
                        tip = Math.floor(timer/3600)+'小时前'      
                }else if(timer/86400<=31){
                        tip = Math.ceil(timer/86400)+'天前' 
                 //return tip 
                }else{
                        tip = this.getLastDate(timestamp)
                }  
                    console.log(tip);
                    this.tips.push(tip)//存放tip到数组tips
 
               }
               console.log(this.tips.reverse());
              })
  
                  

             }
    

           
           
        },
        mounted(){
            this.circledData();
            this.getUnix();
            this.getTodayUnix();
            this.getYearUnix();
            this.upCircle();
            
        },
        
      
    }
</script>

<style lang="scss" scoped>
.circel::-webkit-scrollbar-thumb{
    color: rgb(221, 33, 33);
}
.container{
    margin: 3vw;
}
//搜索框
.nav{
    .van-search .van-cell{
       padding-left: 8px;
      
    }
}
.sea{
    ::deep van-search van-search--show-action{
        padding:  auto;     
    }
    position: fixed;
    width: 100%;
    left:0;
    top: 0px;
    z-index: 10; 
    //padding-right: 14px;
}
.bai{
    width: 100%;
    height: 8.2vh;
}
// 活动展示

.activity{
    height: 17vh;
    width: 94vw;
    margin-left: 3vw;
    
    //border: 1px solid black;
    display: flex;
    justify-content: center;
    margin-top: 1.4vh;
    div{
        //border: 1px solid red;
        width: 46vw; 
        img{
            width: 100%;
        }
    }
    div:first-child{
        padding: 0 1vw;
    }
    div:last-child{
        padding:0 1vw;
    }   
}


// 阴影设置
.yin{
    border-bottom: 5px solid rgba(201, 190, 190,0.2);
}
// 内容部份
.container{
    .active{
            color:red
        }
    .noactive{
        color:black
    }
    .header{   
        height: 8vh;
        display: flex;
        align-content: center;
        justify-content: space-between;
        .in{
        display: flex;
        align-content: center;
        .nicheng{
        padding-left: 3vw;
          .n2{
              font-size: 1vh;
          }
        }
        
    }    
}
    .main{
        .con{
        margin-bottom: 1vh;
        }
        ::v-deep .van-grid-item__content{
        padding: 2px;
        }
        .pic {
        width: 94vw;
        //height: 30vh;
        display: flex;
        //justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        
        ::v-deep div{
            //border: 1px solid black;
            border-radius: 2px;
            width: 29.5vw;
            height: 12vh;
            margin-right: 1vw;
            margin-bottom: 0.7vh;
            overflow: hidden;
            img{
                width: 100%;
                
            }
        }
        }
}
    .footer{
        height: 6vh;
        text-align: center;
        line-height: 6vh;
    //border: 1px solid black;
        .active{
        color: red;
        }
        // 分享设置
        ::v-deep .van-overlay{
            background-color: rgba(0, 0, 0, 0.3);
        }
        ::v-deep .van-popup{
            background-color: rgb(233, 227, 222);
        }
        ::v-deep .van-share-sheet__cancel{
            background: rgb(214, 205, 205);
        }
        ::v-deep .van-share-sheet__cancel::before{
            background-color: rgba(214, 205, 205,0.7);
        }
    
}

}
.van-grid-item{
    //border:1px solid black;
}
</style>
